<template>
	<!-- 系统消息 -->
	<view id="message">
		<view class="no-data" v-if="note_list.length==0">
			暂无系统消息
		</view>
		<scrollView height1="95vh" :isReloadComplete1="isReloadComplete" :isShowBottomView1="isShowBottomView" :isShowNodata1="isReloadComplete && !isNoData" @downdata="downdata" @updata="updata" @onScroll="onScroll" v-else>
			<view class="System-message" v-for="(item,index) in note_list" @click="to_detail(item.id)">
				<view class="title">
					<!-- 左边 -->
					<view class="left">
						<image class="icon" src="../../../static/mine/xtxx.png" mode=""></image>
						<text>{{item.title}}</text>
					</view>
					<!-- 右边 -->
					<text class="right">{{item.insert_time}}</text>
				</view>
				<!-- 消息内容 -->
				<view class="content">
					<!-- <view class="share">分享好友成功</view> -->
					<view class="txt">{{item.describe}}</view>
					<view class="btn">点击查看详情</view>
				</view>
			</view>
			<selfRoll :active="roll" :left="right" @scrollTo="scrollTo"></selfRoll>
		</scrollView>
	</view>
</template>

<script>
	import scrollView from '../../../components/scroll-view/scroll-view.vue';
	import selfRoll from '../../../components/self-roll/roll.vue';
	
	export default {
		components: {
			scrollView,
			selfRoll
		},
		data() {
			return {
				note_list:[],
				page: 1,
				size: 10,
				isReloadComplete: false,
				isNoData: true,
				roll: false, //返回顶部
				right: '80vw', //右侧距离
				systemHeight: 0, //系统高度
				isShowBottomView: false,
				page_count: 0
			};
		},
		onLoad() {
			this.get_sys_note();
			this.systemHeight = this.getSystemMsg('windowHeight');
		},
		methods:{
			// 获取系统通知
			get_sys_note(){
				let self=this;
				self.iserror = true;
				self.$u.api.get_sys_note({
					page: this.page,
					psize: this.size,
				}).then(res=>{
					if(res.code == 200) {
						if(this.page === 1) {
							// 首次加载
							this.note_list = res.data.data;
							this.page_count = res.data.page_count;
						} else {
							this.note_list.push(...res.data.data)
						}
						this.iserror = false;
					} else {
						this.iserror = false;
					}
				})
			},
			// 查看详情
			to_detail(id){
				uni.navigateTo({
					url:'./msg-detail?id='+id
				})
			},
			// 下拉刷新
			downdata() {
				let self = this;
				self.isShowBottomView = false;
				setTimeout(() => {
					uni.$emit('downdataHD', {
						type: 'down'
					});
					self.page = 1;
					self.note_list = [];
					self.isReloadComplete = false;
					self.isNoData = true;
					self.get_sys_note();
				}, 1000)
			},
			// 上拉加载
			updata() {
				let self = this;
				self.isShowBottomView = true;
				if(self.page < self.page_count) {
					self.page++;
				} else {
					self.isReloadComplete = true;
					self.isNoData = false;
					uni.$emit('updataHD', {
						type: 'up'
					});
					self.isShowBottomView = false;
					return 
				}
				self.get_sys_note();
				this.isShowBottomView = false;
			},
			// 页面滚动
			onScroll(e) {
				if (e.scrollTop > this.systemHeight) {
					this.roll = true;
				} else {
					this.roll = false;
				}
			},
			/*scrollview返回远点*/
			scrollTo() {
				uni.$emit('goTop', '');
			},
			//获取系统参数
			getSystemMsg: function(key) {
				var result = '';
				uni.getSystemInfo({
					success: (res) => {
						if (key === 'windowHeight') {
							result = res.windowHeight;
						}
					}
				});
				return result;
			},
		}
	}
</script>

<style lang="scss">
	#message {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 100%;
		background-color: #f7f7f7;
		.no-data{
			width: 98vw;
			height: 100rpx;
			margin-top: 10rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 100rpx;
			box-shadow: 0px 0px 2px #808080;
		}
		.System-message {
			width: 683rpx;
			height: 215rpx;
			background-color: #fff;
			margin: 0 auto;
			margin-top: 33rpx;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(217, 217, 217, 0.4);
			border-radius: 10rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #D9D9D9;
				padding: 15rpx 12rpx 6rpx 19rpx;

				.left {
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.icon {
						width: 31.1rpx;
						height: 31.1rpx;
						margin-right: 12rpx;
					}
				}

				.right {
					font-size: 18rpx;
					color: #707070;
				}
			}

			.content {
				text-indent: 22rpx;
				box-sizing: border-box;

				.share {
					color: #FF0000;
					font-size: 24rpx;
					font-weight: 700;
					padding-top: 21rpx;
				}

				.txt {
					font-size: 20rpx;
					font-weight: 400;
					padding-top: 22rpx;
					color: #707070;
				}

				.btn {
					font-size: 20rpx;
					font-weight: 400;
					padding-top: 18rpx;
					padding-bottom: 18rpx;
					background: linear-gradient(180deg, #FE7575 0%, #98D7FF 0%, #5F9BFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
	}
</style>
